<template>
  <div class="share clear">
    <img src="@/assets/fenxiangGeigerhaoyou01.png" class="top-img" alt="">
    <div class="block">
      <p class="title">分享智慧宝，让大家更了解自己</p>
      <p class="tip">好东西，与大家一起分享</p>
      <img src="@/assets/miyaoguanli03.png" class="core" alt="">
      <div class="flex">
        <div class="con" @click="is_show = true">
          <img src="@/assets/fenxiangGeigerhaoyou02.png" alt="">
          <p>微信好友</p>
        </div>
        <div class="con" @click="is_show = true">
          <img src="@/assets/fenxiangGeigerhaoyou03.png" alt="">
          <p>微信朋友圈</p>
        </div>
      </div>
    </div>
    <div class="mask-div" v-if="is_show">
      <div class="mask-bg" @click="is_show = false"></div>
      <div class="content">
        <img src="@/assets/fenxiangb1.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    components: {
    },
    data () {
      return {
        is_show: false
      }
    },
    created () {
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
    }
  }
</script>

<style lang="stylus" scoped>
.share
  .top-img
    width 100%
    float left
  .block
    width 92%
    margin-left 4%
    box-shadow 0 3px 8px 0 rgba(230,230,230,.8)
    background-color #fff
    float left
    text-align center
    margin-top -6.1rem
    padding-bottom 2.5rem
    .title
      font-size 2rem
      font-weight bold
      line-height 2rem
      height 2rem
      color #333
      padding-top 2.5rem
      padding-bottom 1.6rem
    .tip
      color #333
      font-size 1.5rem
      height 1.6rem
      line-height 1.6rem
      margin-bottom 1.6rem
    .core
      width 13.3rem
      display inline-block
    .flex
      display flex
      margin-top 1.5rem
      .con
        flex 1
        img
          width 4.4rem
          display inline-block
          margin-bottom .5rem
  .content
    width 18.5rem
    top 1rem
    right 1.5rem
</style>
